<template>
	<div id="CombatDetail">
		<Nav />

		<!-- 板报 -->
		<div class="course-infos-top " style="background-image:url(https://img.mukewang.com/szimg/5efe9536098f87d720000400.jpg)">
			<div class="info-wrap">
				<div class="path">
					<a href="https://www.imooc.com"><i class="iconfont icon-huore"></i></a>
					<i class="split">/</i>
					<a href="/">实战</a>
					<i class="split">/</i>
					<span>.Net Core 开发电商后端API 从0到精通吃透RESTful</span>
				</div>
				<div class="extra">
					<div class="course-collect clearfix js-course-collect l" data-type="0" data-cid="451">
						<i class="imv2-star j"><img src="../assets/icon/shoucang.png" alt=""></i>
						<span>收藏</span>
					</div>
					<!-- 分销的分享不同于普通分享 -->
					<div class="share-action l bdsharebuttonbox bg bdshare-button-style0-16" data-bd-bind="1594294899648">
						<a href="javascript:;" class="share sz-weixin" data-cmd="weixin" title="分享到微信">
							<i class="iconfont icon-weixin ii"></i>
						</a>
						<a href="javascript:;" class="share sz-weibo" data-cmd="tsina" title="分享到新浪微博">
							<i class="iconfont icon-weibo ii"></i>
						</a>
						<a href="javascript:;" data-cmd="qzone" class="share sz-qq" title="分享到QQ空间">
							<i class="iconfont icon-qq ii"></i>
						</a>
					</div>
				</div>

				<div class="title-box">
					<h1>
						.Net Core 开发电商后端API
						<br />
						吃透RESTful风格
					</h1>
					<h2>首门. Net Core实战+RESTful思想纵深课程，开发极致RESTful风格API</h2>
				</div>

				
			</div>
			<div class="fixed-wrap" style="bottom:-64px">
				<div class="con">
					<!-- 只在未购买和已购买正常转状态显示 -->
					<div class="time-price clearfix">
						<div class="discount clearfix l">
							<!-- 限时促销 倒计时/整点免单 倒计时/学生惠 -->
							<div class="sale-timer l clearfix">
								<i class="name l">限时优惠</i>
								<div class="timer js-sale-timer l" data-timer="2261901" data-endtime="1596556799">截止至8月4日</div>
							</div>
							<div class="sale-price l">￥328.00</div>
							<div class="ori-price l">原价￥388.00</div>
						</div>

						<div class="can-huabei l"><a href="https://www.imooc.com/help/detail/110" target="_blank">花呗付款</a></div>
						<div class="can-baitiao l"><a href="https://www.imooc.com/help/detail/131" target="_blank">京东白条</a></div>
					</div>
					<div class="info-bar clearfix" style="margin-top:0px">
						<span>难度</span>
						<span class="nodistance">初级</span>
						<i class="iii">.</i>
						<span>时长</span>
						<span class="nodistance">16小时</span>
						<i class="iii">.</i>
						<span>学习人数</span>
						<span class="nodistance">44</span>
						<i class="iii">.</i>
						<span>综合评分</span>
						<span class="nodistance">10.00</span>
					</div>
					<div class="btns">
						<a href="javascript:;" class="js-buy-trigger red-btn gobuy" data-cid="451" data-pay="0" id="buy-trigger">立即购买</a>
						<a href="javascript:;" class="js-addcart addcart" data-cid="451" data-type="1">加购物车</a>
					</div>
				</div>
			</div>
		</div>

		<!-- 简介 -->
		<div class="course-infos-t ">
			<div class="comp-tab-t js-comp-tab">
				<ul class="clearfix">
					<li class="comp-tab-item-first comp-tab-item active ">
						<a href="https://coding.imooc.com/class/451.html#Anchor">课程介绍</a>
						<div class="borderLine"></div>
					</li>
					<li class="comp-tab-item ">
						<a href="javascript:void(0)" class="zhuge_chapter" data-href="https://coding.imooc.com/class/chapter/451.html#Anchor">
							章节目录
							<img class="try-mark" src="https://coding.imooc.com/static/module/class/chapter/img/try-mark.png" alt="" />
						</a>

						<div class="borderLine"></div>
					</li>
					<li class="comp-tab-item">
						<a href="javascript:void(0)" class="zhuge_consult" data-href="https://coding.imooc.com/class/451.html#Prchor">售前咨询</a>
						<span>5</span>
						<div class="borderLine"></div>
					</li>
					<li class="comp-tab-item ">
						<a href="javascript:void(0)" class="zhuge_evaluate" data-href="https://coding.imooc.com/class/evaluation/451.html#Anchor">用户评价</a>
						<span>4</span>
						<div class="borderLine"></div>
					</li>

					<li class="comp-tab-item "><a href="https://coding.imooc.com/class/451.html#Envir">环境参数</a></li>
				</ul>
			</div>

			<!-- <div class="js-fixed course-fixed-nav hide" style="display: block;">
				<h3 class="fixed-course-name" title=".Net Core 开发电商后端API   从0到精通吃透RESTful">.Net Core 开发电商后端API 从0到精通吃透RESTful</h3>

				<ul class="fixed-nav clearfix">
					<li class="fixed-nav-item active">
						<a href="/class/451.html#Anchor">课程介绍</a>
						<div class="borderLine"></div>
					</li>
					<li class="fixed-nav-item ">
						<a href="javascript:void(0)" class="zhuge_chapter" data-href="/class/chapter/451.html#Anchor">
							章节目录
							<img class="try-mark" src="/static/module/class/chapter/img/try-mark.png" alt="" />
						</a>
						<div class="borderLine"></div>
					</li>
					<li class="fixed-nav-item">
						<a href="javascript:void(0)" class="zhuge_consult" data-href="/class/451.html#Prchor">售前咨询</a>
						<span>5</span>
						<div class="borderLine"></div>
					</li>
					<li class="fixed-nav-item ">
						<a href="javascript:void(0)" class="zhuge_evaluate" data-href="/class/evaluation/451.html#Anchor">用户评价</a>
						<span>4</span>
						<div class="borderLine"></div>
					</li>
					<li class="fixed-nav-item ">
						<a href="/class/451.html#Envir">环境参数</a>
						<div class="borderLine"></div>
					</li>
				</ul>

				<div class="buy-con">
					<div class="btns-buy r">
						<a href="javascript:;" class="js-buy-trigger fixed-red" data-cid="451" data-pay="0" id="buy-trigger">立即购买</a>
						<a href="javascript:;" class="js-addcart addcart" data-cid="451" data-type="1"><i class="sz-add-shopping-cart"></i></a>
					</div>

					<! 限时优惠倒计时 -->
					<!--<div class="discount-act r">
						<p class="act-price">限时优惠 ￥328.00</p>
						<p class="act-time">
							<span class="time js-sale-timer2">截止至8月4日</span>
							<span class="ori-price">¥388.00</span>
						</p>
					</div>
					<! 学生惠 -->
				<!--</div>
			</div> -->

			<div class="info-video clearfix" style="background-image: url(https://img.mukewang.com/szimg/5efe956408edeb0109000500.jpg);">
				<div class="video-dark-box l clearfix" style="display: block;">
					<div class="js-video-btn videoBtn l">
						<a href="">
							<div class="iiii">
								<p class="zan"></p>
								<img src="../assets/icon/bofang.png" alt="">
							</div>
							<p>观看试看视频</p>
						</a>
						
					</div>
					<div id="videoInfo" class="l">
						<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 312px;">
							<div id="content" style="overflow: hidden; width: auto; height: 312px;">
								<div class="con">
									<div class="info-name">.Net Core 开发电商后端API 从0到精通吃透RESTful</div>
									<div class="info-desc">
										随着前后端分离成为市场主流，使用RESTful风格构建企业级应用已经是行业共识，但市场上对RESTful风格的认知及开发能力却参差不齐。本课程通过开发“慕课旅游网”项目，带领大家吃透RESTful思想，真正掌握高成熟度（HATEOAS超媒体引擎）级别RESTful API的开发技能。课程项目采用.Net Core框架，以开源、轻量、跨平台优势受到技术市场欢迎，是极其适合网站后端开发的热门技术框架。
									</div>
								</div>

								<div class="line"></div>
							</div>
							<div
								class="slimScrollBar"
								style="background: rgb(255, 255, 255); width: 8px; position: absolute; top: 0px; opacity: 1; display: none; border-radius: 8px; z-index: 99; right: 0px; height: 312px;">
							</div>
							<div
								class="slimScrollRail"
								style="width: 8px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 0px;">
							</div>
						</div>
					</div>
				</div>
				<div class="detail-white-box l" style="display: none;">
					<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 336px;">
						<div class="scrollConTeacher" style="overflow: hidden; width: auto; height: 336px;">
							<div class="detailContent">
								<div class="nickname">阿莱克斯刘</div>
								<div class="jobType">资深全栈工程师</div>
								<div
									class="introduce"
									data-text="<p>北美资深全栈工程师、web技术专家，10年IT从业经验，精通 .Net、.Net Core、C# 、Docker、Azure云等技术，对web研发、高并发、分布式部署有独特见解。曾任职于Netgear(美国网件)、UBC(英属哥伦比亚大学)，现就职于北美某政府单位。课程讲解深入浅出，擅长于培养学生的思维能力。</p>"
								>
									<p>
										北美资深全栈工程师、web技术专家，10年IT从业经验，精通 .Net、.Net Core、C#
										、Docker、Azure云等技术，对web研发、高并发、分布式部署有独特见解。曾任职于Netgear(美国网件)、UBC(英属哥伦比亚大学)，现就职于北美某政府单位。课程讲解深入浅出，擅长于培养学生的思维能力。
									</p>
								</div>
							</div>
						</div>
						<div
							class="slimScrollBar"
							style="background: rgb(217, 221, 225); width: 8px; position: absolute; top: 0px; opacity: 1; display: block; border-radius: 8px; z-index: 99; right: 0px;"
						></div>
						<div
							class="slimScrollRail"
							style="width: 8px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 0px;"
						></div>
					</div>
				</div>

				<div class="teacher-right-box l">
					<div class="teacher">
						<div class="whiteBorder"></div>
						<a href="https://www.imooc.com/u/7771012" target="_blank">
							<div class="headPortrait"><img src="https://img.mukewang.com/user/545868330001e54e02200220-100-100.jpg" /></div>
							<div class="nickname">阿莱克斯刘</div>
						</a>
						<p>资深全栈工程师</p>
					</div>
					<div class="jiao" style="display: none;"></div>
				</div>
				<!-- 导学视频 （旧）-->
				<div
					class="comp-tabs-pannel video-container"
					style="display: none;"
					data-purl="https://img.mukewang.com/szimg/5efe956408edeb0109000500.jpg"
					data-vurl="https://v3.mukewang.com/shizhan/5efeaceecd5ca91122492458/H.mp4"
					id="js-video-content">
					<!-- <div class="desc-short"> -->
					<div class="video-wrap">
						<div class="video-container" id="video-container"></div>
					</div>

					<!-- </div> -->

					<div class="video-mask"></div>
					<div id="js-video-close" class="video-close imv2-close"></div>
				</div>
			</div>

			<!-- 试看视频列表 -2019.01.24-->
			<div id="video-wrap">
				<!-- <div id="video-box">
					<div class="video-title">
						<h2>课程预览</h2>
						<div id="js-close-mediaview" class="close-mediaview imv2-close"></div>
					</div>
					<ul class="video-list">
						<li>
							<a href="javascript:void(0);" class="js-change-media ui-media-title" data-mid="37329" data-title="1-1 课前须知，这里有你需要了解的一切">
								<i class="imv2-video_circle"></i>
								<div class="right-box">
									<div class="title">1-1 课前须知，这里有你需要了解的一切</div>
									<div class="state"></div>
								</div>
							</a>
							<div id="try-video-container0" class="try-video-container"></div>
						</li>
						<li>
							<a href="javascript:void(0);" class="js-change-media ui-media-title" data-mid="37330" data-title="3-1 【理解】商城数据模型设计">
								<i class="imv2-video_circle"></i>
								<div class="right-box">
									<div class="title">3-1 【理解】商城数据模型设计</div>
									<div class="state"></div>
								</div>
							</a>
							<div id="try-video-container1" class="try-video-container"></div>
						</li>
						<li>
							<a href="javascript:void(0);" class="js-change-media ui-media-title" data-mid="37350" data-title="7-2 【应用】创建旅游路线资源">
								<i class="imv2-video_circle"></i>
								<div class="right-box">
									<div class="title">7-2 【应用】创建旅游路线资源</div>
									<div class="state"></div>
								</div>
							</a>
							<div id="try-video-container2" class="try-video-container"></div>
						</li>
					</ul>
				</div> -->
				<!-- <div class="next-mask" id="next-mask">
					<div class="next-content">
						<div class="wechat-box js-wechat-box">
							<a href="javascript:void(0)" class="moco-icon-close moco-modal-close wechat-close js-wechat-close"></a>
							检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
							<div style="text-align:center"><img width="100%" src="" /></div>
						</div>
						<div id="next-media-content"></div>
						<a href="javascript:;" class="view-again js-view-again">
							<i class="sz-replay"></i>
							重新观看
						</a>
					</div>
					<i class="helper"></i>
				</div> -->
			</div>
		</div>

		<!-- 内容 -->
		<div class="infolayout clearfix">
			<div class="appendtemplate ">
				<!--ES_BEGIN-->
				<div class="introduce-content">
					<div class="section0">
						<div class="wrap">
							<div class="content-box clearfix">
								<h1>你一定听过RESTful API，但你并不一定精通它</h1>
								<h4>项目实战+理论解析双保障，带你真正掌握RESTful风格</h4>
								<div class="img-box">
									<div class="left">
										<div class="top">
											<i class="circle1"></i>
											<h5>懂得URI就是了解RESTful API ？</h5>
											<i class="circle2"></i>
											<h5>用表现层传递就是RESTful风格？</h5>
											<i class="circle3"></i>
											<h5 class="h5">
												熟悉GET/POST/ PUT/DELETE
												<br />
												就是擅长RESTful ？
											</h5>
										</div>
										<div class="bottom">
											<i class="circle1"></i>
											<h5>什么是6个约束？</h5>
											<i class="circle2"></i>
											<h5>
												什么是服务成熟度，如何进行实际
												<br />
												评估？
											</h5>
											<i class="circle3"></i>
											<h5>如何规划URL设计模式？</h5>
											<i class="circle4"></i>
											<h5>怎样正确使用状态码？</h5>
											<i class="circle5"></i>
											<h5>如何理解和使用内容协商？</h5>
											<i class="circle6"></i>
											<h5>怎样开发一个高成熟度RESTful API？</h5>
										</div>
									</div>
									<div class="middle">
										<div class="top"></div>
										<div class="bottom"></div>
									</div>
									<div class="right">
										<div class="top">
											<div class="content">
												<p>
													<span>项目经验：</span>
													<span>用.Net Core开发慕课旅游网后端系统</span>
												</p>
												<p>
													<span>思想提升：</span>
													<span>掌握极致RESTful风格</span>
												</p>
											</div>
										</div>
										<div class="middle"></div>
										<div class="bottom">
											<span>Richardson服务成熟度分级</span>
											<span>市场开发者水平</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="section1">
						<div class="wrap">
							<div class="content-box">
								<h1>
									基于.Net Core,手把手实现电商后端系统
									<br />
									并借助项目重构来讲透极致RESTful
								</h1>
								<div class="main">
									<div class="left-img"></div>
									<div class="right-img">
										<div class="branch"></div>
										<div class="branch-item">
											<div class="item-left item">
												<div class="title">开发HATEOAS级电商后端API</div>
												<div class="content1 content">基础设计：面向资源 (L1)</div>
												<div class="content2 content">进阶设计：面向过程 (L2)</div>
												<div class="content3 content">高阶设计：API的自我发现 (L3)</div>
												<div class="vertical">
													<i>逐步实现</i>
													逐级掌握
												</div>
											</div>
											<div class="item-right item">
												<div class="row">
													<div class="item">产品模块</div>
													<div class="item">用户模块</div>
												</div>
												<div class="row">
													<div class="item">购物模块</div>
													<div class="item">订单模块</div>
												</div>
												<div class="row-bottom">
													<div class="vertial-ietm">异步操作</div>
													<div class="vertial-ietm">数据映射</div>
													<div class="vertial-ietm">数据塑性</div>
													<div class="vertial-ietm">分页</div>
													<div class="vertial-ietm">排序</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="main-bottom"></div>
							</div>
						</div>
					</div>
					<div class="section2">
						<div class="wrap">
							<div class="content-box clearfix">
								<h1>项目整体架构以及重点技术栈展示</h1>
								<div class="title-box">
									<div class="title-left  title-all"></div>
									<div class="title-right title-all "></div>
								</div>
								<div class="content-main">
									<div class="left-item"></div>
									<div class="right-item">
										<div class="small-title">
											<div class="title-before left">底层框架</div>
											<div class="title-before right" id="shenfen">身份授权</div>
										</div>
										<div class="small-content">
											<div class="content-all left-cont">
												.Net Core 3
												<br />
												ASP .Net Core
											</div>
											<div class="content-all right-cont" id="frame">
												Identity 框架
												<br />
												JWT 无状态登陆
											</div>
										</div>
										<div class="small-title">
											<div class="title-before left" id="shujuku">数据库</div>
											<div class="title-before" id="right-top">依赖注入</div>
										</div>
										<div class="small-content">
											<div class="content-all left-cont">
												SQL Server (容器化部署)
												<br />
												Entity Framework(ORM框架)
											</div>
											<div class="content-all right-cont" id="right-cont">.Net Core IOC</div>
										</div>
										<div class="small-title">
											<div class="title-before left" id="left-title">C#高级编程</div>
											<div class="title-before right" id="right-top1">反向代理</div>
										</div>
										<div class="small-content">
											<div class="content-all left-cont">
												函数式编程 Linq
												<br />
												异步处理 async/await
											</div>
											<div class="content-all right-cont" id="right-cont1">
												IIS
												<br />
												Kestrel
											</div>
										</div>
										<div class="small-title"><div class="title-before right" id="right-top2">容器化</div></div>
										<div class="small-content"><div class="content-all right-cont" id="right-cont2">Docker</div></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="section3">
						<div class="wrap">
							<div class="content-box clearfix">
								<h1>前景广阔 医药&amp;金融等高薪行业喜爱的后端框架</h1>
								<div class="img-box2">
									<div class="left-img"></div>
									<div class="right-img">
										<p>它们都在用.Net Core :</p>
										<div class="img"></div>
									</div>
								</div>
								<div class="img-box3">
									<p>
										在国外，.Net Core与Java平分后端市场
										<br />
										在国内，除了医药、金融行业热衷使用 , 知名大厂与越来越多的中小企业项目也向.Net Core迁移
									</p>
								</div>
							</div>
						</div>
					</div>

					<div class="section6">
						<div class="wrap">
							<div class="content-box">
								<div class="box1">
									<div class="box-title">学员专享增值服务</div>
									<div class="flex-box1 marginbottom32">
										<div class="item">
											<div class="item1">
												<div><i class="el-icon-chat-dot-square"></i></div>
											</div>
											<div class="item2">
												<p class="p-title">问答专区</p>
												<p class="p-content">
													关于课程的问题都可在问答区随时提问,讲师会进行
													<br />
													集中答疑
												</p>
											</div>
										</div>
										<div class="item">
											<div class="item1">
												<div><i class="el-icon-arrow-left  i1"></i><i class="el-icon-arrow-right i1"></i></div>
											</div>
											<div class="item2">
												<p class="p-title">源码开放</p>
												<p class="p-content">
													课程案例代码完全开放给你，你可以根据所学知
													<br />
													识，自行修改、优化，用于正式项目
												</p>
											</div>
										</div>
									</div>
								</div>
								<div class="flex-box2">
									<div class="item">
										<p class="p-title">适合人群</p>
										<p class="p-content">
											向往极致RESTful风格开发；
											<br />
											对.Net Core开发感兴趣的在校学生、初或中级程序员
										</p>
									</div>
									<div class="item">
										<p class="p-title">技术储备要求</p>
										<p class="p-content">熟悉C#基础语法</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--ES_END-->
			</div>

			<div class="envir-box " id="Envir">
				<h1>环境参数</h1>
				<div class="detail-box">
					<ul class="clearfix">
						<li class="l ">
							<span class="detail-tag">.NET 环境</span>
							<i class="triangle"></i>
							<span class="detail">.Net Core 3.1</span>
						</li>
						<li class="l ">
							<span class="detail-tag">部署环境</span>
							<i class="triangle"></i>
							<span class="detail">docker v19+</span>
						</li>
						<li class="l ">
							<span class="detail-tag">数据库</span>
							<i class="triangle"></i>
							<span class="detail">MS SQL Server 及其他</span>
						</li>
						<li class="l ">
							<span class="detail-tag">IDE</span>
							<i class="triangle"></i>
							<span class="detail">Visual Studio</span>
						</li>
					</ul>
				</div>
			</div>

			<div class="preconsultation" id="Prchor">
				<div class="w question-input">
					<input type="text" placeholder="输入你的课程咨询问题" class="input-block js-inputcont" data-can-search="true" data-pagesize="6" />
					<div class="question-btn js-question-btn" data-cid="451">提问</div>
				</div>
				<div class="w question-contain js-load-prelist" data-cid="451">
					<ul class="prebox question-content">
						<li>
							<div class="left-hand fl">
								<div class="hand-block js-praise" data-advid="61552">
									<i class="el-icon-thumb"></i>
									<br />
									<span class="hand-number">3</span>
								</div>
							</div>
							<div class="mid-detail fl">
								<h3 class="question-title"><a href="/class/consult/detail/61552.html" title="项目的前端页面提供么？">项目的前端页面提供么？</a></h3>
								<div class="answer-content">
									<p>亲，您好~不仅是前端页面，包括配套思维导图、课程源码、电子书也都会全部当作福利赠送给各位同学们！祝您学习愉快~</p>
								</div>
							</div>
						</li>
						<li>
							<div class="left-hand fl">
								<div class="hand-block js-praise" data-advid="61554">
									<i class="el-icon-thumb"></i>
									<br />
									<span class="hand-number">2</span>
								</div>
							</div>
							<div class="mid-detail fl">
								<h3 class="question-title">
									<a href="/class/consult/detail/61554.html" title="这个项目是完整的吗，可以用来做毕设吗？">这个项目是完整的吗，可以用来做毕设吗？</a>
								</h3>
								<div class="answer-content">
									<p>亲，您好~课程的项目完整的，可以用作毕业设计的参考资料，同时还会超值赠送配套前端页面，思维导读、电子书！祝您学习愉快~</p>
								</div>
							</div>
						</li>
						<li>
							<div class="left-hand fl">
								<div class="hand-block js-praise" data-advid="61550">
									<i class="el-icon-thumb"></i>
									<br />
									<span class="hand-number">2</span>
								</div>
							</div>
							<div class="mid-detail fl">
								<h3 class="question-title"><a href="/class/consult/detail/61550.html" title="只会点语法，能不能学会呀？">只会点语法，能不能学会呀？</a></h3>
								<div class="answer-content">
									<p>
										亲，您好~课程不会涉及过深的语法知识，只要能熟练掌握c#语法基础知识，就可以学习。而且课程中会结合语法特性进行细致讲解，只要跟着老师的节奏，肯定没问题。祝您学习愉快~
									</p>
								</div>
							</div>
						</li>
						<li>
							<div class="left-hand fl">
								<div class="hand-block js-praise" data-advid="61556">
									<i class="el-icon-thumb"></i>
									<br />
									<span class="hand-number">1</span>
								</div>
							</div>
							<div class="mid-detail fl">
								<h3 class="question-title"><a href="/class/consult/detail/61556.html" title="是边写代码边讲解的吗？">是边写代码边讲解的吗？</a></h3>
								<div class="answer-content">
									<p>
										亲，您好~课程将会建立在理解原理的基础上，通过手把手完成代码来巩固同学们的知识点。并且在实操的同时，老师也会总结自己的工作学习经验，介绍很多c#代码以及编程思维的的小技巧。祝您学习愉快~
									</p>
								</div>
							</div>
						</li>
						<li>
							<div class="left-hand fl">
								<div class="hand-block js-praise" data-advid="61551">
									<i class="el-icon-thumb"></i>
									<br />
									<span class="hand-number">1</span>
								</div>
							</div>
							<div class="mid-detail fl">
								<h3 class="question-title">
									<a href="/class/consult/detail/61551.html" title=".net5快出来了，现在学这个以后会不会就直接过期了?">
										.net5快出来了，现在学这个以后会不会就直接过期了?
									</a>
								</h3>
								<div class="answer-content">
									<p>
										亲，您好~不会的，课程使用的是目前的最新版，也是企业内应用最多的稳定版.net core 3.1, 它也属于LTS(long term
										support长期支持)的版本。而.net5目前依然是预览版本的状态，等.net5推出LTS的时候本门课程也会同步升级，迁移至到.net5，保障大家畅学无忧。祝您学习愉快~
									</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>

			<div id="js-load-LearnPath" class="w learnpath" data-id="451"></div>

			<div class="w shizhan-recommendcourse js-recom-course" data-id="451"></div>

			<div class="w info-recommendcourse js-prelearn" data-id="451">
				<h3 class="box-tit box-class-tit">课前必学</h3>
				<div class="free-course-list clearfix">
					<div class="index-card-container course-card-container container ">
						<a target="_blank" class="course-card" href="https:https://www.imooc.com/learn/1188">
							<div class="course-card-top cart-color red"><span>C#</span></div>
							<div class="course-card-content">
								<h3 class="course-card-name">打造你的第一个ASP.NET Core MVC网站应用</h3>
								<p title="熟练掌握ASP.Net Core MVC的开发原则与使用方式">熟练掌握ASP.Net Core MVC的开发原则与使用方式</p>
								<div class="clearfix course-card-bottom">
									<div class="course-card-info">
										中级
										<span>·</span>
										8506人在学
									</div>
								</div>
							</div>
						</a>
						<div class="course-card-bk"><img src="https://www.imooc.com/courseimg/s/cover034_s.jpg" /></div>
					</div>
				</div>
			</div>
		</div>

		<Footer />
	</div>
</template>

<script>
import Nav from './nav.vue';
import Footer from '../components/Footer.vue';

export default {
	components: {
		Nav,
		Footer
	}
};
</script>

<style>
@import url('../assets/css/util.css');
@import url('../assets/icon/download/font_1935626_xggmermzajm/iconfont.css');
#CombatDetail .course-infos-top {
	width: 100%;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
#CombatDetail .course-infos-top .info-wrap {
	width: 1152px;
	margin: 0 auto;
	padding-top: 72px;
	padding-bottom: 136px;
	position: relative;
}
#CombatDetail .course-infos-top .info-wrap .path {
	position: absolute;
	top: 16px;
	font-size: 12px;
	line-height: 24px;
}
#CombatDetail .path {
	opacity: 0.6;
	color: #fff;
	font-size: 12px;
}
#CombatDetail .course-infos-top .info-wrap .path a {
	color: rgba(255, 255, 255, 0.6);
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
}
#CombatDetail .course-infos-top .info-wrap .path a i {
	font-size: 20px;
	color: rgba(255, 255, 255, 0.6);
	line-height: 24px;
	position: relative;
	top: 4px;
}
#CombatDetail .course-infos-top .info-wrap .path .split {
	color: rgba(255, 255, 255, 0.6);
	padding: 0 4px;
	font-style: normal;
}
#CombatDetail .course-infos-top .info-wrap .path span {
	color: rgba(255, 255, 255, 0.6);
}
#CombatDetail .course-infos-top .info-wrap .extra {
	position: absolute;
	right: 0;
	top: 12px;
}
#CombatDetail .course-infos-top .info-wrap .extra .course-collect {
	margin-right: 36px;
	cursor: pointer;
}
#CombatDetail .l {
	float: left;
}
#CombatDetail .course-infos-top .info-wrap .extra .course-collect i {
	font-size: 20px;
}
#CombatDetail .course-infos-top .info-wrap .extra .course-collect i,
.course-infos-top .info-wrap .extra .course-collect span {
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	float: left;
	color: rgba(255, 255, 255, 0.4);
	line-height: 32px;
}
#CombatDetail .course-infos-top .info-wrap .extra .course-collect span {
	font-size: 12px;
	margin-left: 4px;
}
#CombatDetail .course-infos-top .info-wrap .extra .course-collect i,
.course-infos-top .info-wrap .extra .course-collect span {
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	float: left;
	color: rgba(255, 255, 255, 0.4);
	line-height: 32px;
}
#CombatDetail .course-infos-top .info-wrap .extra .share-action.bg {
	padding-left: 2px;
	background-color: #a1a1a1\9\0;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0, rgba(255, 255, 255, 0.1) 100%);
}
#CombatDetail .course-infos-top .info-wrap .extra .share-action {
	border-radius: 16px;
	padding-right: 14px;
	height: 32px;
	cursor: pointer;
	font-size: 0;
}
#CombatDetail .course-infos-top .info-wrap .title-box {
	width: 1000px;
	margin: 0 auto;
}
#CombatDetail .course-infos-top .info-wrap .title-box h1 {
	text-align: center;
	font-size: 40px;
	color: #fff;
	line-height: 48px;
	text-shadow: 0 2px 4px rgba(28, 31, 33, 0.6);
}
#CombatDetail .course-infos-top .info-wrap .title-box h2 {
	text-align: center;
	font-size: 16px;
	color: #fff;
	line-height: 24px;
	text-shadow: 0 2px 4px rgba(28, 31, 33, 0.6);
	margin-top: 8px;
}
#CombatDetail .course-infos-top .fixed-wrap {
	width: 1152px;
	min-height: 128px;
	position: absolute;
	left: 50%;
	margin-left: -576px;
	bottom: -64px;
	background-image: url(https://coding.imooc.com/static/module/img/fixed_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 18px;
	box-shadow: 0 8px 16px 0 rgba(28, 31, 33, 0.1);
}
#CombatDetail .course-infos-top .fixed-wrap .con {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 32px 40px;
	box-sizing: border-box;
}
#CombatDetail .clearfix:after {
	content: '\0020';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#CombatDetail .course-infos-top .fixed-wrap .con .time-price .discount .sale-timer {
	padding: 6px 12px;
	background-color: #f90\9\0;
	background-image: linear-gradient(90deg, rgba(255, 0, 105, 0.99) 0, #ff7a00 99%);
	border-radius: 16px;
}
#CombatDetail .course-infos-top .fixed-wrap .con .time-price .discount .sale-timer .name {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	line-height: 20px;
}
#CombatDetail .course-infos-top .fixed-wrap .con .time-price .discount .sale-timer div {
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	margin-left: 8px;
}
#CombatDetail .course-infos-top .fixed-wrap .con .time-price .discount .sale-price {
	font-size: 32px;
	color: #f01414;
	line-height: 32px;
	font-weight: 700;
	margin-left: 8px;
}
#CombatDetail .course-infos-top .fixed-wrap .con .time-price .discount .ori-price {
	font-size: 14px;
	color: #93999f;
	font-weight: 700;
	line-height: 32px;
	margin-left: 8px;
	margin-right: 2px;
	text-decoration: line-through;
}
#CombatDetail .course-infos-top .fixed-wrap .con .time-price .can-huabei {
	margin-top: 3px;
	margin-left: 12px;
	line-height: 12px;
	padding: 6px 10px;
	background-color: #6c61d3\9\0;
	background-image: linear-gradient(90deg, #6c61d3 0, #53a0fd 100%);
	border-radius: 12px;
}
#CombatDetail .course-infos-top .fixed-wrap .con .time-price .can-huabei a {
	font-size: 12px;
	color: #fff;
}
#CombatDetail .course-infos-top .fixed-wrap .con .time-price .can-baitiao {
	margin-top: 3px;
	margin-left: 17px;
	line-height: 12px;
	padding: 6px 10px;
	background-image: linear-gradient(90deg, #ff323f 0, #f76469 100%);
	border-radius: 12px;
}
#CombatDetail .course-infos-top .fixed-wrap .con .time-price .can-baitiao a {
	font-size: 12px;
	color: #fff;
}
#CombatDetail .course-infos-top .fixed-wrap .con .info-bar {
	margin-top: 12px;
}
#CombatDetail .course-infos-top .fixed-wrap .con .info-bar span {
	font-size: 12px;
	color: #545c63;
	line-height: 24px;
	font-weight: 700;
	padding-right: 8px;
}
#CombatDetail .course-infos-top .fixed-wrap .con .info-bar i {
	font-size: 16px;
	color: #545c63;
	line-height: 16px;
	padding: 0 4px;
	vertical-align: middle;
}
#CombatDetail .course-infos-top .fixed-wrap .con .btns {
	position: absolute;
	top: 40px;
	right: 40px;
	font-size: 0;
}
#CombatDetail .course-infos-top .fixed-wrap .con .btns .gobuy {
	margin-right: 16px;
}
#CombatDetail .course-infos-top .fixed-wrap .con .btns .addcart {
	background: rgba(240, 20, 20, 0.1);
	border-radius: 24px;
	font-size: 16px;
	color: #f20d0d;
	letter-spacing: 0;
	line-height: 24px;
	font-weight: 700;
	padding: 12px 48px;
	position: relative;
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
}
#CombatDetail .course-infos-top .info-wrap .extra .imv2-star img{
	width: 30px;
}
#CombatDetail .course-infos-top .info-wrap .extare a{
	margin-left: 8px;
}

/* 图标样式强制更改 */
#CombatDetail .ii{
	font-size: 22px !important;
	margin-left: 8px;
	color: white;
}
#CombatDetail .iii{
	margin-right: 8px;
}
#CombatDetail .iiii {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background-color: #FFFFFF;
}
#CombatDetail .iiii .zan{
	height: 25px;
}
#CombatDetail .iiii img{
	width: 40px;
	height: 40px;
	margin: auto;
}

#CombatDetail .course-infos-t {
    padding-top: 64px;
    overflow: hidden;
}
#CombatDetail .course-infos-t .comp-tab-t {
    padding: 28px 0 32px 0;
    text-align: center;
}
#CombatDetail .course-infos-t .comp-tab-t ul {
    display: inline-block;
}
#CombatDetail .course-infos-t .comp-tab-item {
    height: 40px;
    position: relative;
    font-size: 16px;
    line-height: 27px;
    float: left;
    margin-left: 60px;
}
#CombatDetail .course-infos-t .comp-tab-item-first {
    margin-left: 0;
}
#CombatDetail .course-infos-t .comp-tab-item a {
    font-weight: 700;
    font-size: 16px;
    line-height: 40px;
    color: #545c63;
    vertical-align: text-bottom;
}
#CombatDetail .course-infos-t .comp-tab-item .borderLine {
    display: none;
    position: absolute;
    width: 16px;
    height: 2px;
    top: 40px;
    left: 50%;
    margin-left: -8px;
    background: #f20d0d;
}
#CombatDetail .course-infos-t .comp-tab-item.active .borderLine {
    display: block;
}
#CombatDetail .course-infos-t .comp-tab-item.active a {
    color: #f20d0d;
}
#CombatDetail .course-infos-t .comp-tab-item .sub-tag,#CombatDetail .course-infos-t .comp-tab-item .try-mark {
    position: absolute;
    top: 0;
    right: -30px;
    width: 30px;
    height: 18px;
}
#CombatDetail .course-infos-t .comp-tab-item span {
    position: absolute;
    top: 0;
    left: 67px;
    font-size: 12px;
    color: #93999f;
}
#CombatDetail .course-fixed-nav {
    width: 100%;
    height: 64px;
    background: #fff;
    box-shadow: 0 8px 16px 0 rgba(28,31,33,.1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    text-align: center;
}
#CombatDetail .course-infos-t .video-dark-box {
    width: 862px;
    height: 312px;
    box-sizing: border-box;
}
#CombatDetail .course-infos-t .video-dark-box .videoBtn {
    width: 96px;
    margin: 96px 100px 86px 100px;
}
#CombatDetail .course-infos-t .video-dark-box .videoBtn .iiii {
    font-size: 96px;
    color: #fff;
    opacity: .7;
    animation: mymove 2s infinite;
    -moz-animation: mymove 2s infinite;
    -webkit-animation: mymove 2s infinite;
    -o-animation: mymove 2s infinite;
}
#CombatDetail .course-infos-t .video-dark-box .videoBtn p {
    font-size: 16px;
    color: #fff;
    line-height: 24px;
    text-align: center;
    margin-top: 8px;
}
#CombatDetail .course-infos-t .video-dark-box #videoInfo {
    width: 564px;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
#CombatDetail .course-infos-t .info-video {
    width: 1152px;
    height: 448px;
    box-sizing: border-box;
    margin: 0 auto 48px auto;
    text-align: left;
    padding: 64px 0 72px 0;
    box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
    border-radius: 16px;
    display: block;
    background: #4d4d4d;
    background-size: cover;
    background-position: center;
}
#CombatDetail .course-infos-t .video-dark-box #videoInfo #content {
    position: relative;
    padding-right: 95px;
    display: table;
}
#CombatDetail .course-infos-t .video-dark-box #videoInfo #content .con {
    display: table-cell;
    vertical-align: middle;
}
#CombatDetail .course-infos-t .video-dark-box #videoInfo #content .info-name {
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    line-height: 36px;
    margin-bottom: 16px;
}
#CombatDetail .course-infos-t .video-dark-box #videoInfo #content .info-desc {
    font-size: 14px;
    color: #fff;
    line-height: 28px;
}
#CombatDetail .course-infos-t .video-dark-box #videoInfo #content .line {
    position: absolute;
    top: 0;
    right: 3px;
    width: 2px;
    height: 100%;
    background: rgba(255,255,255,.4);
}
#CombatDetail .course-infos-t .detail-white-box {
    position: relative;
    margin-top: -64px;
    left: 0;
    width: 880px;
    box-sizing: border-box;
    height: 448px;
    background: #fff;
    box-shadow: 0 8px 16px 0 rgba(7,17,27,.1);
    border-radius: 16px 0 0 16px;
    padding: 48px 60px 60px 64px;
    overflow: hidden;
}
#CombatDetail .course-infos-t .detail-white-box .scrollConTeacher {
    padding-right: 20px;
    box-sizing: border-box;
}
#CombatDetail .course-infos-t .detail-white-box .detailContent .nickname {
    font-weight: 700;
    font-size: 32px;
    color: #f20d0d;
    line-height: 48px;
}
#CombatDetail .course-infos-t .detail-white-box .detailContent .jobType {
    font-weight: 700;
    font-size: 20px;
    color: #07111b;
    line-height: 30px;
    margin-bottom: 24px;
}
#CombatDetail .course-infos-t .detail-white-box .detailContent .introduce p {
    font-size: 16px;
    color: #07111b;
    line-height: 32px;
}
#CombatDetail .course-infos-t .teacher-right-box {
    width: 272px;
    height: 312px;
    padding-top: 49px;
    position: relative;
}
#CombatDetail .course-infos-t .teacher-right-box .teacher {
    width: 160px;
    margin: 0 auto;
    position: relative;
    text-align: center;
}
#CombatDetail .course-infos-t .teacher-right-box .teacher .whiteBorder {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto 12px auto;
    background: #fff;
}
#CombatDetail a:active,#CombatDetail a:hover {
    color: #f20d0d;
}

#CombatDetail a:link,#CombatDetail a:visited {
    color: #1c1f21;
}
#CombatDetail .r {
    float: right;
}
#CombatDetail .course-infos-t .teacher-right-box .teacher .headPortrait {
    width: 132px;
    height: 132px;
    left: 14px;
    top: 5px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
}
#CombatDetail .course-infos-t .teacher-right-box .teacher .nickname {
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    line-height: 30px;
    margin-bottom: 4px;
}
#CombatDetail .course-infos-t .teacher-right-box .teacher p {
    font-size: 14px;
    color: #fff;
    line-height: 22px;
}
#CombatDetail .course-infos-t .teacher-right-box .jiao {
    position: absolute;
    top: 100px;
    height: 0;
    width: 0;
    border-top: 20px solid transparent;
    border-left: 25px solid #fff;
    border-bottom: 20px solid transparent;
}
#CombatDetail .course-infos-t .teacher-right-box .teacher .headPortrait img {
    width: 100%;
    height: 100%;
}


/* 内容 */
#CombatDetail .infolayout {
    overflow: hidden;
}
#CombatDetail .section0 {
    width: 100%;
    height: 742px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/bg01.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .wrap {
    width: 1152px;
    margin: 0 auto;
}
#CombatDetail .section0 .wrap {
    height: 100%;
}
#CombatDetail .section0 .wrap .content-box {
    position: relative;
    padding-top: 64px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
#CombatDetail .section0 .wrap .content-box h1 {
    font-size: 32px;
    color: #1c1f21;
    text-align: center;
    line-height: 48px;
    font-weight: 700;
    margin-bottom: 4px;
}
#CombatDetail .section0 .wrap .content-box h4 {
    font-size: 16px;
    color: #1c1f21;
    text-align: center;
    line-height: 24px;
    margin-bottom: 48px;
}
#CombatDetail .section0 .wrap .content-box .img-box {
    width: 1145px;
    height: 490px;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#CombatDetail .section0 .wrap .content-box .img-box .left {
    width: 290px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .top {
    position: relative;
    height: 130px;
    margin-bottom: 8px;
    padding-top: 72px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/img01.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .top i {
    display: block;
    width: 10px;
    height: 10px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/circle.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 78px;
    left: 27px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .top h5 {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1c1f21;
    line-height: 22px;
    margin-bottom: 4px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .top .circle2 {
    top: 103px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .top h5 {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1c1f21;
    line-height: 22px;
    margin-bottom: 4px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .top .circle3 {
    top: 128px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .top .h5 {
    text-align: left;
    margin-left: 43px;
	font-family: PingFangSC-Regular;
	    font-size: 14px;
	    color: #1c1f21;
	    line-height: 22px;
	    margin-bottom: 4px
}
#CombatDetail .section0 .wrap .content-box .img-box .left .bottom {
    position: relative;
    height: 208px;
    width: 246px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/img02.png);
    background-size: cover;
    background-position: center;
    padding-top: 72px;
    text-align: left;
    padding-left: 44px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .bottom i {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 78px;
    left: 27px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/circle.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .bottom h5 {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1c1f21;
    line-height: 22px;
    margin-bottom: 5px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .bottom .circle2 {
    top: 106px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .bottom .circle3 {
    top: 154px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .bottom .circle4 {
    top: 181px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .bottom .circle5 {
    top: 208px;
}
#CombatDetail .section0 .wrap .content-box .img-box .left .bottom .circle6 {
    top: 235px;
}
#CombatDetail .section0 .wrap .content-box .img-box .middle {
    width: 347px;
}
#CombatDetail .section0 .wrap .content-box .img-box .middle .top {
    width: 190px;
    height: 74px;
    margin: 0 auto;
    margin-top: 67px;
    margin-bottom: 19px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/img03.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section0 .wrap .content-box .img-box .middle .bottom {
    height: 261px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/img04.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section0 .wrap .content-box .img-box .right {
    width: 453px;
}
#CombatDetail .section0 .wrap .content-box .img-box .right .top {
    width: 440px;
    height: 100px;
    margin: 0 auto;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/img05.png);
    background-size: cover;
    background-position: center;
    padding-top: 42px;
}
#CombatDetail .section0 .wrap .content-box .img-box .right .top .content {
    width: 331px;
    height: 55px;
    margin: 0 auto;
}
#CombatDetail .section0 .wrap .content-box .img-box .right .top .content p:first-child {
    margin-bottom: 5px;
}
#CombatDetail .section0 .wrap .content-box .img-box .right .top .content p {
    text-align: left;
    color: #1c1f21;
}
#CombatDetail .section0 .wrap .content-box .img-box .right .top .content p span:first-child {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    line-height: 24px;
}
#CombatDetail .section0 .wrap .content-box .img-box .right .top .content p span:last-child {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    line-height: 22px;
}
#CombatDetail .section0 .wrap .content-box .img-box .right .middle {
    height: 256px;
    width: 453px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/img06.png);
    background-size: cover;
    background-position: center;
    margin-bottom: 18px;
}
#CombatDetail .section0 .wrap .content-box .img-box .right .bottom span:first-child {
    display: inline-block;
    margin-right: 133px;
}
#CombatDetail .section0 .wrap .content-box .img-box .right .bottom span {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #1c1f21;
    letter-spacing: 0;
    line-height: 18px;
}
#CombatDetail .section1 {
    width: 100%;
    height: 764px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/bg02.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section1 .wrap {
    height: 100%;
}
#CombatDetail .section1 .wrap .content-box {
    position: relative;
    padding-top: 64px;
    margin: 0 auto;
    width: 1300px;
    box-sizing: border-box;
    text-align: center;
    padding-right: 100px;
}
#CombatDetail .section1 .wrap .content-box h1 {
    font-family: PingFangSC-Semibold;
    font-size: 32px;
    color: #fff;
    text-align: center;
    line-height: 48px;
    font-weight: 700;
    margin-bottom: 50px;
}
#CombatDetail .section1 .wrap .content-box .main {
    width: 1140px;
    height: 375px;
    margin: 0 auto;
    margin-bottom: 50px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#CombatDetail .section1 .wrap .content-box .main .left-img {
    width: 461px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/left-img.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section1 .wrap .content-box .main .right-img {
    width: 604px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch {
    position: relative;
    width: 464px;
    height: 148px;
    margin: 0 auto;
    background-image: url(/static/module/class/content/img/451/branch.png);
    background-size: cover;
    background-position: center;
    z-index: 1;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item {
    position: relative;
    margin-top: -20px;
    width: 604px;
    height: 248px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item {
    width: 280px;
    height: 248px;
    background-color: #fff;
    border-radius: 10px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-left .title {
    width: 210px;
    height: 28px;
    margin: 0 auto;
    background-color: #ddefff;
    margin-top: 36px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1c1f21;
    text-align: center;
    line-height: 28px;
    margin-bottom: 33px;
    border-radius: 2px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-left .content {
    border: 1px dashed #2397ff;
    border-radius: 2px;
    margin-left: 46px;
    margin-bottom: 16px;
    height: 30px;
    width: 176px;
    line-height: 30px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-left .content2 {
    width: 186px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-left .content3 {
    width: 214px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-left .vertical {
    position: absolute;
    left: 18px;
    top: 80px;
    width: 14px;
    height: 150px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1c1f21;
    text-align: center;
    line-height: 18px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-left .vertical i {
    display: block;
    margin-bottom: 12px;
    font-style: normal;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-right {
    height: 203px;
    padding-top: 45px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item {
    width: 280px;
    height: 248px;
    background-color: #fff;
    border-radius: 10px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-right .row:first-child {
    margin-bottom: 15px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-right .row {
    width: 178px;
    height: 28px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-right .row .item {
    width: 78px;
    height: 28px;
    background-color: #ddefff;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1c1f21;
    text-align: center;
    line-height: 28px;
    border-radius: 2px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-right .row:nth-child(2) {
    margin-bottom: 18px;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-right .row {
    width: 178px;
    height: 28px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-right .row-bottom {
    width: 214px;
    height: 92px;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#CombatDetail .section1 .wrap .content-box .main .right-img .branch-item .item-right .row-bottom .vertial-ietm {
    width: 30px;
    height: 76px;
    border: 1px dashed #2397ff;
    border-radius: 2px;
    writing-mode: tb-rl;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1c1f21;
    text-align: center;
    line-height: 30px;
    text-align-last: justify;
    padding-top: 8px;
    padding-bottom: 8px;
}
#CombatDetail .section1 .wrap .content-box .main-bottom {
    width: 841px;
    height: 52px;
    margin: 0 auto;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/main-bottom.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section2 {
    width: 100%;
    height: 587px;
    position: relative;
    background-color: #fff;
}
#CombatDetail .section2 .wrap {
    height: 100%;
}
#CombatDetail .section2 .wrap .content-box {
    position: relative;
    padding-top: 64px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
#CombatDetail .section2 .wrap .content-box h1 {
    font-size: 32px;
    color: #1c1f21;
    text-align: center;
    line-height: 48px;
    font-weight: 700;
    margin-bottom: 48px;
}
#CombatDetail .section2 .wrap .content-box .title-box {
    width: 708px;
    height: 50px;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 35px;
}
#CombatDetail .section2 .wrap .content-box .title-box .title-all {
    width: 175px;
    height: 50px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/title-left.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section2 .wrap .content-box .title-box .title-right {
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/title-right.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section2 .wrap .content-box .content-main {
    width: 934px;
    height: 271px;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#CombatDetail .section2 .wrap .content-box .left-item {
    width: 460px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/left-item-img.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section2 .wrap .content-box .right-item {
    width: 348px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title {
    position: relative;
    height: 22px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #1c1f21;
    letter-spacing: 0;
    line-height: 22px;
    margin-bottom: 4px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title .left {
    margin-right: 166px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title .left, .section2 .wrap .content-box .right-item .small-title .right {
    width: 56px;
}


#CombatDetail .section2 .wrap .content-box .right-item .small-title #shenfen {
    margin-left: 10px;
}
#CombatDetail .small-title .right {
    width: 56px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-content {
    position: relative;
    height: 44px;
    margin-bottom: 30px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-content .content-all {
    width: 241px;
    height: 44px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #545c63;
    letter-spacing: 0;
    line-height: 22px;
    text-align: left;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-content #frame {
    margin-left: 26px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-content .right-cont {
    width: 134px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title .title-before::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #f7b500;
    position: absolute;
    top: 6px;
    left: -20px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title .title-before::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #f7b500;
    position: absolute;
    top: 6px;
    left: -20px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title .right::before {
    left: -10px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title #right-top::before {
    position: absolute;
    top: 6px;
    left: 207px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-content {
    position: relative;
    height: 44px;
    margin-bottom: 30px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-content .content-all {
    width: 241px;
    height: 44px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #545c63;
    letter-spacing: 0;
    line-height: 22px;
    text-align: left;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-content #right-cont {
    position: absolute;
    left: 232px;
    top: -2px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-content .right-cont {
    width: 134px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title {
    position: relative;
    height: 22px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #1c1f21;
    letter-spacing: 0;
    line-height: 22px;
    margin-bottom: 4px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title #left-title {
    width: 75px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title .left {
    margin-right: 166px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title #shujuku {
    text-align: left;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title #right-top1 {
    position: absolute;
    top: -52px;
    left: 232px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-content #right-cont1 {
    position: absolute;
    left: 232px;
    top: -54px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title #right-top2 {
    position: absolute;
    top: -76px;
    left: 225px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-content #right-cont2 {
    position: absolute;
    left: 232px;
    top: -76px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title #right-top {
    position: absolute;
    top: -18px;
    left: 232px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title .right::before {
    left: 213px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title #right-top::before {
    position: absolute;
    top: 6px;
    left: -19px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title #right-top1::before {
    position: absolute;
    top: 6px;
    left: -19px;
}
#CombatDetail .section2 .wrap .content-box .right-item .small-title #right-top2::before {
    position: absolute;
    top: 6px;
    left: -12px;
}


#CombatDetail .section3 {
    width: 100%;
    height: 587px;
    position: relative;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/bg03.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section3 .wrap {
    height: 100%;
}
#CombatDetail .section3 .wrap .content-box {
    position: relative;
    padding-top: 64px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
#CombatDetail .section3 .wrap .content-box h1 {
    font-size: 32px;
    color: #2a1c00;
    text-align: center;
    line-height: 48px;
    font-weight: 700;
    margin-bottom: 48px;
}
#CombatDetail .section3 .wrap .content-box .img-box2 {
    width: 828px;
    height: 192px;
    margin: auto;
    margin-bottom: 36px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#CombatDetail .section3 .wrap .content-box .img-box2 .left-img {
    width: 246px;
    height: 169px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/left-img1.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section3 .wrap .content-box .img-box2 .right-img {
    width: 484px;
    height: 192px;
}
#CombatDetail .section3 .wrap .content-box .img-box2 .right-img p {
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #1c1f21;
    letter-spacing: 0;
    line-height: 28px;
    text-align: left;
}
#CombatDetail .section3 .wrap .content-box .img-box2 .right-img .img {
    width: 484px;
    height: 154px;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/right-img1.png);
    background-size: cover;
    background-position: center;
}
#CombatDetail .section3 .wrap .content-box .img-box3 {
    width: 663px;
    height: 60px;
    margin: 0 auto;
    background-image: url(https://coding.imooc.com/static/module/class/content/img/451/img-box3.png);
    background-size: cover;
    background-position: center;
    padding-top: 50px;
}
#CombatDetail .section3 .wrap .content-box .img-box3 p {
    width: 594px;
    height: 44px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1c1f21;
    letter-spacing: 0;
    text-align: center;
    margin: 0 auto;
}
#CombatDetail .section6 {
    width: 100%;
    height: 596px;
    position: relative;
    background-color: #fff;
}
#CombatDetail .section6 .wrap {
    height: 100%;
    box-sizing: border-box;
}
#CombatDetail .section6 .wrap .content-box {
    position: relative;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding-top: 323px;
}
#CombatDetail .section6 .wrap .content-box .box1 {
    padding: 40px 90px 0 90px;
    box-sizing: border-box;
    width: 100%;
    height: 248px;
    z-index: 2;
    position: absolute;
    top: 47px;
    background-image: linear-gradient(118deg,#24a9ff 15%,#217eff 95%);
    border-radius: 24px;
}
#CombatDetail .section6 .wrap .content-box .box1 .box-title {
    text-align: center;
    font-size: 24px;
    color: #fff;
    line-height: 36px;
    font-weight: 700;
    margin-bottom: 26px;
}
#CombatDetail .section6 .wrap .content-box .box1 .flex-box1 {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#CombatDetail .section6 .wrap .content-box .box1 .marginbottom32 {
    margin-bottom: 32px;
}
#CombatDetail .section6 .wrap .content-box .box1 .flex-box1 .item {
    width: 360px;
    width: 310px;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#CombatDetail .section6 .wrap .content-box .box1 .flex-box1 .item .item1 {
    width: 40px;
}
#CombatDetail .section6 .wrap .content-box .box1 .flex-box1 .item .item1 div {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 20px;
}
#CombatDetail .section6 .wrap .content-box .box1 .flex-box1 .item .item1 div {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 20px;
}
#CombatDetail .section6 .wrap .content-box .box1 .flex-box1 .item  i {
    font-size: 24px;
    color: #217fff;
    text-align: center;
    line-height: 40px;
}
#CombatDetail .section6 .wrap .content-box .box1 .flex-box1 .item  .i1 {
    font-size: 20px;
    color: #217fff;
    text-align: center;
    line-height: 40px;
}
#CombatDetail .section6 .wrap .content-box .box1 .flex-box1 .item .item2 {
    width: 250px;
    text-align: left;
}
#CombatDetail .section6 .wrap .content-box .box1 .flex-box1 .item .item2 .p-title {
    font-size: 16px;
    color: #fff;
    line-height: 24px;
    font-weight: 700;
}
#CombatDetail .section6 .wrap .content-box .box1 .flex-box1 .item .item2 .p-content {
    width: 320px;
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    margin-top: 10px;
}
#CombatDetail .section6 .wrap .content-box .box1 .flex-box1 .item:last-child {
    margin-right: 145px;
}
#CombatDetail .section6 .wrap .content-box .flex-box2 {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-sizing: border-box;
}
#CombatDetail .section6 .wrap .content-box .flex-box2 .item {
    width: 564px;
    height: 224px;
    background: #f3f5f6;
    border-radius: 24px;
    padding-top: 40px;
    box-sizing: border-box;
    text-align: center;
}
#CombatDetail .section6 .wrap .content-box .flex-box2 .item .p-title {
    font-size: 24px;
    color: #217fff;
    line-height: 36px;
    font-weight: 700;
    margin-bottom: 19px;
}
#CombatDetail .section6 .wrap .content-box .flex-box2 .item .p-content {
    font-size: 14px;
    color: #383d42;
    line-height: 22px;
}


/*  环境参数 */
#CombatDetail .envir-box {
    width: 100%;
    background: #2b333b;
    margin: 0 auto;
}
#CombatDetail .envir-box h1 {
    width: 1200px;
    margin: 0 auto;
    padding-top: 72px;
    padding-left: 24px;
    padding-bottom: 24px;
    border-bottom: 2px solid #555c62;
    box-sizing: border-box;
    font-size: 24px;
    line-height: 24px;
    color: #fff;
}
#CombatDetail .envir-box .detail-box {
    width: 1200px;
    padding: 36px 48px 80px;
    box-sizing: border-box;
    margin: 0 auto;
}
#CombatDetail .envir-box .detail-box ul {
    width: 100%;
}
#CombatDetail .envir-box .detail-box ul li {
    position: relative;
    width: 528px;
    height: 32px;
    margin-right: 48px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 32px;
    list-style: none;
    overflow: hidden;
}
#CombatDetail .envir-box .detail-box ul li .detail-tag {
    background: #93999f;
    padding: 7px 4px 7px 12px;
    box-sizing: border-box;
    color: #07111b;
    line-height: 14px;
}
#CombatDetail .envir-box .detail-box ul li .triangle {
    position: relative;
    margin-right: 8px;
}
#CombatDetail .envir-box .detail-box ul li .triangle:after {
    position: absolute;
    left: -5px;
    content: '';
    width: 0;
    height: 0;
    border-top: 16px solid #2b333b;
    border-left: 10px solid #93999f;
    border-bottom: 16px solid #2b333b;
}
#CombatDetail .envir-box .detail-box ul li .detail {
    color: #fff;
    padding-left: 8px;
}
#CombatDetail .envir-box .detail-box ul li:nth-child(2n) {
    margin-right: 0;
}

/* 提问 */
#CombatDetail .preconsultation {
    background-color: #f3f5f7;
    padding: 90px 0 32px 0;
}
#CombatDetail .question-input {
    text-align: center;
    margin-bottom: 32px;
}
#CombatDetail .question-input .input-block {
    width: 656px;
}
#CombatDetail .input-block {
    font-size: 16px;
    height: 62px;
    line-height: 62px;
    color: #07111b;
    padding-left: 24px;
    border: 1px solid #d9dde1;
    outline: 0;
}
#CombatDetail .question-btn {
    width: 120px;
    height: 64px;
    line-height: 64px;
    background-color: #f01404;
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    margin-left: -5px;
    cursor: pointer;
}
#CombatDetail .question-contain {
    background-color: #fff;
    margin: 0 auto;
    display: block;
    padding: 24px 0;
}
.w {
    width: 1200px;
    margin: 0 auto;
}
#CombatDetail .question-contain .question-content {
    overflow: hidden;
}
#CombatDetail .question-contain .question-content li {
    float: left;
    width: 528px;
    padding: 0 24px 0 48px;
    margin-top: 24px;
}
#CombatDetail .prebox li .left-hand {
    margin-right: 16px;
}
#CombatDetail .fl {
    float: left;
}
#CombatDetail .prebox li .left-hand .hand-block {
    background: #f3f5f7;
    color: #93999f;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 18px;
    position: relative;
    cursor: pointer;
    border: 1px solid #f3f5f7;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
}
#CombatDetail .prebox li .left-hand .hand-block .hand-number {
    margin-top: 8px;
    color: #93999f;
    font-size: 12px;
    line-height: 12px;
    display: block;
}
#CombatDetail .question-contain .question-content li .mid-detail {
    width: 454px;
}
#CombatDetail .prebox li .mid-detail .question-title {
    font-size: 16px;
    line-height: 32px;
    color: #07111b;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-word;
    -webkit-transition: color .2s ease-out;
    transition: color .2s ease-out;
}	
#CombatDetail .prebox li .mid-detail .answer-content {
    color: #4d555d;
    font-size: 14px;
    line-height: 28px;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
#CombatDetail .question-contain .question-content li .answer-content {
    height: 84px;
    margin-bottom: 24px;
}
#CombatDetail .prebox li .left-hand {
    margin-right: 16px;
}
#CombatDetail .question-contain .question-content li .mid-detail {
    width: 454px;
}
#CombatDetail .prebox li .mid-detail .question-title a{
	font-size: 16px
}
#CombatDetail .prebox li .mid-detail .question-title a:hover {
    color: #f01414;
}
#CombatDetail .learnpath {
    padding: 36px 0;
}
#CombatDetail .shizhan-recommendcourse {
    width: 1200px;
    margin: 0 auto;
    padding: 32px 0 0;
}

/* 课前必学 */
#CombatDetail .info-recommendcourse {
    padding: 32px 0;
    overflow: hidden;
    margin-bottom: 60px;
}
#CombatDetail .info-recommendcourse .box-tit {
    font-size: 16px;
    color: #07111b;
    line-height: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}
#CombatDetail	 .info-recommendcourse .free-course-list {
    box-sizing: border-box;
    width: 100%;
    border-bottom: none;
    padding: 0;
    padding-left: 2px;
}
#CombatDetail .info-recommendcourse .free-course-list .index-card-container {
    float: left;
    margin-right: 18px;
    margin-bottom: 18px;
    border-radius: 4px;
}
#CombatDetail .course-card-container {
    width: 224px;
    height: 228px;
    border-radius: 4px;
    background-color: #fff;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
    transition: .3s all linear;
}
#CombatDetail .course-card-container .course-card {
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    overflow: hidden;
}
#CombatDetail .cart-color.red {
    background: linear-gradient(270deg,rgba(255,115,155,.7),#ff739b);
}
#CombatDetail .course-card-container .course-card-top span {
    float: left;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 48px;
    margin-right: 10px;
}
#CombatDetail .course-card-container .course-card-top {
    height: 48px;
    padding: 0 20px;
    overflow: hidden;
}
#CombatDetail .course-card-container .course-card-content {
    height: 180px;
    background-color: #fff;
    padding: 16px 24px;
    box-sizing: border-box;
}
#CombatDetail .course-card-container .course-card-name {
    font-size: 14px;
    color: #07111b;
    line-height: 24px;
    max-height: 48px;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    letter-spacing: -.1px;
}
#CombatDetail .course-card-container .course-card-info, .course-card-container p {
    font-size: 12px;
    color: #93999f;
    line-height: 24px;
    margin: 8px 0;
}
#CombatDetail .course-card-container p {
    height: 48px;
    text-overflow: ellipsis;
    word-break: normal;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#CombatDetail .course-card-container .course-card-bottom {
    position: absolute;
    bottom: 24px;
    right: 24px;
    left: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    text-align: right;
}
#CombatDetail	.course-card-container .course-card-info {
    float: left;
    margin: 0;
}
#CombatDetail .course-card-container .course-card-info span {
    margin: 0 3px 0 4px;
    font-weight: 800;
}
#CombatDetail .course-card-container .course-card-bk {
    position: absolute;
    width: 224px;
    height: 228px;
    z-index: 0;
    left: 0;
    top: 0;
    border-radius: 4px;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
}
#CombatDetail .course-card-container .course-card-bk img {
    border-radius: 4px;
}
/* #CombatDetail */
/* #CombatDetail */
/* #CombatDetail */
/* #CombatDetail */
/* #CombatDetail */
/* #CombatDetail */
/* #CombatDetail */
/* #CombatDetail */
/* #CombatDetail */	
</style>
